@use '@/style/variables.scss' as vars;
@use '@/style/mixins.scss' as mixins;

.process-monitoring-container {
  padding: vars.$spacing-lg 0;
}

.search-container {
  margin-bottom: vars.$spacing-lg;
}

.search-box {
  position: relative;
  max-width: 400px;
}

.search-input {
  @include mixins.glass-input;
  padding: vars.$spacing-md 40px vars.$spacing-md vars.$spacing-md;
}

.clear-button {
  position: absolute;
  right: vars.$spacing-sm;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: vars.$text-muted;
  cursor: pointer;
  font-size: vars.$font-size-base;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all vars.$transition-fast;

  &:hover {
    background: vars.$bg-glass-hover;
    color: vars.$text-primary;
  }
}

.process-table {
  @include mixins.glass-table;
}

.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color vars.$transition-fast;

  &:hover {
    background-color: vars.$bg-glass-hover;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: vars.$spacing-xl;
  gap: vars.$spacing-md;
  flex-wrap: wrap;
}

.pagination-btn {
  @include mixins.glass-button;
}

.pagination-info {
  color: vars.$text-secondary;
  font-weight: 500;
  text-align: center;
}
